<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			select{
				width: 180px;
				height: 240px;
				font-size: 16px;
				background-color: #7dff51;
			}
		</style>
		<script type="text/javascript">
			window.onload = function (){
			//需求：点击>>>左边的所有选项全部进入右边
				//点击<<<右边的所有选项全部进入右边
			//思路:获取所有的子元素,然后直接添加到另一侧的选项栏
			
			//获取相关元素
			var sel1 = document.getElementById("sel1");
			var sel2 = document.getElementById("sel2");
			var btnArr = document.getElementsByTagName("button");
			
			//绑定事件
			btnArr[0].onclick = function(){
				//获取左侧的select标签的所有子元素
				var arr = sel1.children;
				//遍历添加到右侧(随着左侧标签内元素的减少，数组的长度也会减少，那么)
				for(var i = arr.length-1;i>=0;i--){
					//push()是操作数组的。要往一个标签中添加元素，要用appendChild();
                    //而往另外一个标签中添加元素原来的数组长度容易变化，为了防止跳出循环，我们使用反向遍历数组
					sel2.appendChild(arr[arr.length-1-i]);
				}
			}
			btnArr[1].onclick = function(){
				//获取左侧的select标签的所有子元素
				var arr = sel2.children;
				//遍历添加到右侧(随着左侧标签内元素的减少，数组的长度也会减少，那么)
				for(var i = arr.length-1;i>=0;i--){
					//push()是操作数组的。要往一个标签中添加元素，要用appendChild();
					//而往另外一个标签中添加元素原来的数组长度容易变化，为了防止跳出循环，我们使用反向遍历数组
					sel1.appendChild(arr[arr.length-1-i]);
				}
			}
			btnArr[2].onclick =function(){
				fn(sel1,sel2);
			}
			btnArr[3].onclick = function(){
				fn(sel2,sel1);
			}
			function fn(ele1,ele2) {
				var arr = ele1.children;
				for(var i=arr.length-1;i>=0;i--){
					if(arr[i].selected === true){
						arr[i].selected = false;
						ele2.appendChild(arr[i]);
					}
				}
			}
		}
		</script>
		
	</head>
	<body>
		<select name="" size="10" id="sel1" multiple="multiple">
			<option value="">香蕉</option>
			<option value="">苹果</option>
			<option value="">鸭梨</option>
			<option value="">葡萄</option>
		</select>
		<button>>>></button>
		<button><<<</button>
		<button>></button>
		<button><</button>
		<select name="" size="10" id="sel2" multiple="multiple">
			
		</select>
	</body>
</html>
